<template>
  <div class="about" v-bind:style="{height: fullHeight,minHeight: fullHeight}">
    <div class="calc">
      <div class="headline">
        <span class="backIcon" @click="goBack"><Icon type="ios-arrow-back" /></span>
        古诗词详解
      </div>
    </div>
    <div class="plantInfo">
      <h3>{{detialData.biaoti}}</h3>
      <span class="author">-- {{detialData.zuozhe}}</span>
      <p>{{detialData.neirong}}</p>
      <p>{{detialData.jieshao}}</p>
    </div>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>

<script>
// 关于页面
export default {
  name: 'poetryDetial',
  data () {
    return {
      fullHeight: document.documentElement.clientHeight - 85 + 'px',
      noUnit: document.documentElement.clientHeight - 85, // 不带单位的当前屏幕的高度，做对比用
      spinShow: true, // loading
      detialData: {} // 详情数据
    }
  },
  mounted () {
    let that = this
    window.onresize = function temp () {
      let differenceVal = document.documentElement.clientHeight - 85 - that.noUnit
      // 如果为负数，说明当前高度小于初始化页面的高度，有虚拟导航之类的情况出现，反之则虚拟导航被隐藏
      if (differenceVal > 0 && differenceVal < 150) { // 小于150说明排除键盘弹出的情况
        that.fullHeight = document.documentElement.clientHeight - 85 + 'px'
      } else if (differenceVal <= 0 && differenceVal > -150) {
        that.fullHeight = that.noUnit + 'px'
      }
    }
    // 页面初始化调用详情数据
    let $id = that.$route.query.id
    that.spinShow = true
    console.log($id)
    let url = '/getList/TangShiSongCi/LookUp?key=f1a9930edce84fb1a16b3befe2281616&id=' + $id + '&page=1&rows=' + that.pageSize
    this.axios.get(url).then(function (response) {
      console.log(response.data.result)
      that.detialData = response.data.result // 获取模拟的动态数据
      that.spinShow = false
    }).catch(function (response) {
      // console.log(response)
      alert('Data request failed!')
    })
  },
  methods: {
    goBack: function () { // 返回上一页按钮
      this.$router.go(-1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.about{
  width: 3.75rem;
  .calc{
    width: 3.75rem;position: fixed;top: 0;left: 0;z-index: 999;
    .headline{
      width: 3.75rem;height: 0.4rem;position: relative;color: #fff;font-weight: bold;text-align: center;background: #2c3e50;
      font-size: 0.18rem;padding-top: 0.06rem;
      .backIcon{position: absolute;left: 0;top: 0;font-size: 0.24rem;padding: 0.03rem 0.15rem 0;}
    }
  }
  .plantInfo{
    padding: 0.6rem 0.1rem;
    h3{font-size: 0.2rem;}
    .author{
      display: block;text-align: right;margin: 0.1rem;
    }
    p{text-align: left;font-size: 0.16rem;margin-bottom: 0.5rem;}
  }
}
</style>
